﻿/*
 * jQuery object to handle interactions on the character pages.
 */
(function ($) {

    $.fn.expander = function (options) {

        var defaults = {
            percentageToExpand: 25
        };

        options = $.extend(defaults, options);

        return this.each(function () {
            var $this = $(this);

            var data = $this.data('expander');
            if (!data) {
                $this.data('expander', { change: 0, expanded : false });
            }

            // add expander icon
            var link = $('<a href="#" class="expander">+</a>');

            $this.prepend(link);

            $this.find('.expander').click(function (event) {
                event.preventDefault();
                var data = $this.data();

                if (data.expander.expanded)
                    return;

                // make width so much bigger.
                var width = $this.width();

                var newWidth = width * (1 + options.percentageToExpand / 100);

                var change = newWidth - width;

                data.expander.change = change;

                // get partner.
                var shrinkers = $this.parent().find('.expander-shrinkable');

                shrinkers.each(function () {
                    var partnerWidth = $(this).width()
                    $(this).animate({ 'width': (partnerWidth - change) + 'px' }, "slow");
                });

                $this.animate({ 'width': newWidth + 'px' }, "slow");
                data.expander.expanded = true;

                $this.mouseleave(function () {
                    // revert columns.
                    var data = $this.data();
                    var change = data.expander.change

                    $this.data('expander', { change: 0 });
                    $this.unbind('mouseleave');

                    var width = $this.width();
                    var newWidth = width - change;

                    // get partners.
                    var shrinkers = $this.parent().find('.expander-shrinkable');

                    shrinkers.each(function () {
                        var partnerWidth = $(this).width()
                        $(this).animate({ 'width': (partnerWidth + change) + 'px' }, "slow");
                    });

                    $this.animate({ 'width': newWidth + 'px' }, "slow");
                });
            });
        });
    }

})(jQuery);